<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			
			body{
				background: palegreen;
			}
			
			img{
				vertical-align: top;
			}
			.box{
				width: 200px;
				height: 200px;
				margin: 100px auto;
				position: relative;
				background: #fff;
				text-align: center;
				overflow: hidden;
			}
			
			.box:hover{
				cursor: pointer;
			}
			
			.box img{
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				/*opacity: 0;*/
				transition: 1s;
			}
			.txt{
				margin-top: 50px;
				transition: 1s;
				transform: rotateY(-180deg);
			}
			.box:hover img{
				transform: rotateY(180deg);
				opacity: 0;
			}
			.box:hover .txt{
				transform: rotateY(0deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="images/xiaoke.jpg"/>
			<div class="txt">
				<p style="font-size: 20px;color: #1F294B;">柯南</p>
				<p>身高:104cm</p>
				<p>年龄:7岁</p>
				<p>爱好:推理</p>
			</div>
		</div>
	</body>
</html>
